<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title></title>
  <link rel="stylesheet" type="text/css" href="../../css/index.css" />
  <script src="../../js/vue.js" type="text/javascript" charset="utf-8"></script>
  <script src="../../js/axios.min.js" type="text/javascript" charset="utf-8"></script>
  <!-- 引入样式 -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" />
  <!-- 引入组件库 -->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <style type="text/css">
    #product {
      /* width: 60%;
				margin: 0 auto; */
    }

    .items {
      width: 1024px;
      margin: 20px auto;
      position: relative;
    }

    .row {
      width: 100%;
      display: flex;
      justify-content: center;
    }

    .row .btn {
      margin: 10px 20px;
      background-color: #0c1243;
      border-color: #3e91c1;
    }

    /* .btn {
				
				position: absolute;
				top: 2rem;
				right: -7rem;

			} */

    .items iframe {
      width: 1024px;
      height: 630px;
      overflow: hidden;
      border: none;
    }

    .el-carousel__item h3 {
      color: #475669;
      font-size: 18px;
      opacity: 0.75;
      line-height: 300px;
      margin: 0;
    }

    .el-carousel__item .item_img {
      width: 100%;
      height: auto;
    }
  </style>
</head>

<body class="conbody">
  <div id="product">
    <div class="header">
      <div class="left">苏州工业园区数字政府典型场景</div>
      <div class="right">
        <a href="../../topology.html">首页</a>
        <a href="../../Intellectualization.html">智慧化场景</a>
        <a href="../../integrated.html">整体性转型</a>
        <a href="../../base.html">平台型底座</a>
      </div>
    </div>
    <div class="items">
      <iframe :src="urls"></iframe>
      <div class="row">
        <el-button type="primary" @click="onbtn" class="btn">视频播放</el-button>
        <el-button type="primary" @click="onbtnPP" class="btn">PPT播放
        </el-button>

        <div class="backbtn" @click="onbtnBack">返回</div>
      </div>
    </div>
    <div style="height: 1px; padding: 1px"></div>
    <div class="footer">
      建设单位：苏州工业园区大数据管理局 &nbsp;&nbsp;&nbsp;&nbsp;技术支持：新建元数字科技有限公司、天聚地合（苏州）数据股份有限公司
    </div>
  </div>

  <script src="../../js/util.js" type="text/javascript" charset="utf-8"></script>
  <script type="text/javascript">
    var product = new Vue({
      el: "#product",
      data: {
        urls: "carousel.html",
        pathName: "",
        backPath: "",
      },
      created() {
        let path = getQueryString("name");
        this.pathName = path;
        this.backPath = getQueryString("back");
        sessionStorage.setItem("name", path);
      },
      mounted() { },
      methods: {
        onbtn() {
          if (this.urls != "video.html") {
            var iframe = document.createElement("iframe");
            //设置iframe的样式
            this.urls = "video.html";
            iframe.src = this.urls;
          }
        },
        onbtnPP() {
          if (this.urls != "carousel.html") {
            var iframe = document.createElement("iframe");
            //设置iframe的样式
            this.urls = "carousel.html";
            iframe.src = this.urls;
          }
        },
        onbtnBack() {
          if (this.backPath == "Intellectualization") {
            window.open("../../Intellectualization.html", "_self");
          } else {
            window.open("../../integrated.html", "_self");
          }
        },
      },
    });
  </script>
</body>

</html>